<template>
  <div class="MailTemp">
    <header class="set-header">
      <span class="auto_title">邮件模板列表</span>
      <el-button size="mini" type="primary" @click="edit('/mail/administration/template/add',-1)">
        +创建邮件模板
      </el-button>
    </header>
    <div class="gray"></div>
    <div class="template  common-scroll-y" :style="{height:$height - 230+'px'}">
      <ul>
        <li v-for="item in tableData" :key="item.id">
          <div class="content" v-html="item.htmlContent">
          </div>
          <div class="make">
            {{item.htmlName}}
            <div class="edit">
              <span class="icon-bianji icon operation_icon" title="编辑模板" @click="edit('/mail/administration/template/edit',item)"></span>
              <span class="icon-delete_icon icon operation_icon" title="删除模板" @click="del(item.id)"></span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
    import {query, del} from "@/api/mail/admin/mail-sign";

    export default {
        name: "MailTemp",
        data() {
            return {
                dialogVisible: false,
                tableData: []
            }
        },
        mounted() {
            this.getData()
        },
        methods: {
            edit(path,row) {
                if(row==-1){
                    this.$router.push(path);
                }else{
                    this.$router.push({
                        path:path,
                        query:{
                            row:JSON.stringify(row)
                        }
                    })
                }
            },
            del(id) {
                this.$confirm("确定将选择模板删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "success"
                }).then(() => {
                    del(id).then(res => {
                        this.$message({
                            type: "success",
                            message: res.data.msg
                        });
                        this.getData();
                    }).catch(err => {
                        console.log(err)
                    });
                })
            },
            getData() {
                query({type: 2}).then(res => {
                    this.tableData = res.data.data;
                }).catch(err => {
                    console.log(err)
                });
            }
        }
    }
</script>

<style scoped lang="scss">
  $activeColor: #2A97F9;
  .MailTemp {
    button.el-button.create.el-button--primary.el-button--small {
      padding: 0 10px;
      line-height: 35px;
      font-size: 14px;
      color: #fff;
      border-radius: 5px;
      margin-left: 30px;
      border: 0;
      background-color: $activeColor;
    }

    .template {
      margin: 30px 0 0 30px;

      ul {
        display: flex;
        flex-wrap: wrap;
      }

      li {
        display: inline-block;
        width: 220px;
        height: 300px;
        background-color: #E9F3FD;
        border-radius: 5px;
        margin-bottom: 20px;
        margin-right: 30px;

        .content {
          height: 260px;
          overflow: hidden;
          font-size: .2rem;
          transform: scale(0.5) translateX(0) translateY(0);
        }

        .make {
          display: flex;
          justify-content: space-between;
          align-items: center;
          background-color: #fff;
          height: 40px;
          padding: 0 10px;
          border: 1px solid #dddddd3d;
          border-top: 0;
          z-index: 999;

          .edit {
            span {
              margin-left: 15px;
              color: #666666e0;
            }
          }
        }
      }
    }
  }

</style>
